<template>
  <view :class="classNameList">
    <view v-if="fixed && placeholder" class="_placeholder">
      <view :style="'height:'+ windowInfo.statusBarHeight +'px'" class="_bar" />
      <view class="_title" />
    </view>
    <view :style="'background:' + background + ';color:' + color"  class="_content">
      <view :style="'height:'+ windowInfo.statusBarHeight +'px'" class="_bar" @click="handleBar" />
      <view :style="[leftStyle]" class="_title" @click="handleClick">
        <view class="_tools">
          <view v-if="isBack" class="_icon" @click="handleToBack">
            <view class="back-icon">
              <x-icon color="#000" :size="44" name="icon-018" />
            </view>
          </view>
          <view v-if="isHome" class="_icon" @click="handleToHome">
            <x-icon :size="44" :color="iconColor" name="icon-002" />
          </view>
          <view class="_line" />
          <view v-if="isShowClose" class="_icon" @click="handleClose">
            <x-icon name="icon-025" :color="iconColor" :size="38"/>
          </view>
          <view v-if="category" class="_icon" @click="handleNavigateTo('/packages/sort/index')">
            <x-icon :size="32" name="icon-038" color="#323233" />
            <text class="_text">分类</text>
          </view>
        </view>
        <view v-if="isCapsuleRight" class="_tools _menu" @click.stop="handleToBack">
          <view class="_icon">
            <x-icon :size="50" :color="iconColor" name="icon-076" />
          </view>
          <view class="_line" />
          <view class="_icon">
            <x-icon :size="50" :color="iconColor" name="icon-075" />
          </view>
        </view>
        <view v-if="search" class="_search" @click="handleNavigateTo('/packages/search/search/index')">
          <x-icon name="icon-012" size="32" color="#999999"/>
          <text class="_text">输入搜索关键词</text>
        </view>
        <view v-else-if="title" class="_name">
          <template v-if="desc">
            <view class="_dt">{{title}}</view>
            <view class="_dd">{{desc}}</view>
          </template>
          <template v-else>
            {{ title }}
          </template>
        </view>
        <view v-else class="_slot">
          <slot />
        </view>
      </view>
    </view>
    <x-subscribe-guide :visible="dialogSubscribeGuide"/>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import XSubscribeGuide from '@/components/x-subscribe-guide';
import { mapState } from 'vuex';

export default {
  name: 'XNavigationBar',
  components: {
    XSubscribeGuide,
    XIcon
  },
  props: {
    title: {
      type: [String, null],
      default: ''
    },
    desc: {
      type: [String, null],
      default: ''
    },
    align: {
      type: String,
      default: 'center'
    },
    background: {
      type: String,
      default: '#fff'
    },
    iconColor: {
      type: String,
      default: '#000'
    },
    color: {
      type: String,
      default: 'black'
    },
    home: {
      type: Boolean,
      default: false
    },
    // 固定悬浮
    fixed: {
      type: Boolean,
      default: true
    },
    // 占位
    placeholder: {
      type: Boolean,
      default: true
    },
    // 显示关闭
    isShowClose: {
      type: Boolean,
      default: false
    },
    // 展示搜索条
    search: {
      type: Boolean,
      default: false
    },
    // 展示分类
    category: {
      type: Boolean,
      default: false
    },
    // 展示订阅消息
    subscribeNode: {
      type: [String, Number],
      default: ''
    },
    storeId: {
      type: [Number, String],
      default: -1
    },
    // 投放页id
    pageId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      // 状态栏的高度
      windowInfo: uni.getWindowInfo(),
      loading: false
    };
  },
  computed: {
    ...mapState({
      // 用户挽留弹框配置的优惠数组
      exitPopupList: state => state['pages'].exitPopupList || [],
      // 用户挽留弹框配置的优惠展示过的下标
      exitPopupIndex: state => state['pages'].exitPopupIndex || 0,
      // 初始场景值
      scene: state => state['pages'].scene,
      // 一键开启/关闭视频号场景挽留弹框
      popupStatus: state => state['pages'].popupStatus,
      dialogSubscribeGuide: state => state['message'].dialogSubscribeGuide
    }),
    // 右侧展示原生胶囊，视频号场景并且非和气小程序
    isCapsuleRight() {
      return this.popupStatus && [1228].includes(this.scene) && !this.search;
    },
    classNameList() {
      const name = ['x-navigation-bar', `is-${this.align}`];
      // 固定悬浮
      if (this.fixed) {
        name.push('is-fixed');
      }
      // 胶囊样式
      if (this.isShowClose) {
        name.push('is-capsule');
      }
      // 右侧胶囊样式
      if (this.isCapsuleRight) {
        name.push('is-capsule-right');
      }
      // 搜索
      if (this.search) {
        name.push('is-search');
      }
      // 分类
      if (this.category) {
        name.push('is-category');
      }
      // 描述副标题
      if (this.desc) {
        name.push('is-desc');
      }
      return name.join(' ');
    },
    // 显示返回按钮
    isBack() {
      const pages = getCurrentPages();
      return pages && pages.length > 1;
    },
    // 显示返回首页按钮
    isHome() {
      if (this.home) return true;
      // 不需要加返回首页的页面
      const blackList = [
        'pages/index/index',
        'pages/order/index',
        'pages/my/index'
      ];
      const pages = getCurrentPages();
      if (pages) {
        const page = pages[pages.length - 1];
        return pages.length === 1 && !blackList.includes(page.route);
      }
      return false;
    },
    leftStyle() {
      if (this.search) {
        // 获取胶囊按钮信息（width、height、top等）
        const { width } = uni.getMenuButtonBoundingClientRect();
        return {
          width: `calc(100% - ${width + 30}px);`
        };
      } else {
        return {
          width: '100%'
        };
      }
    },
    // 是否显示订阅消息
    isShowSubscribe() {
      return this.subscribeNode && this.exitPopupList.length === this.exitPopupIndex;
    }
  },
  watch: {},
  created() {},
  methods: {
    handleBar() {
      uni.pageScrollTo({
        scrollTop: 0
      });
    },
    handleClick() {
      this.$emit('click');
    },
    // 返回首页
    handleToHome() {
      if (this.loading) return false;
      this.$XTrack('homeButtonClick');
      this.setSubscribeNode('switchTab');
    },
    // 返回
    handleToBack() {
      if (this.loading) return false;
      this.$XTrack('backButtonClick');
      this.setSubscribeNode('navigateBack');
    },
    // 处理订阅消息，然后返回
    async setSubscribeNode(type) {
      try {
        if (this.isShowSubscribe) {
          this.loading = true;
          await this.$store.dispatch('message/requestSubscribeMessage', {
            subscribeType: 1,
            subscribeContent: this.pageId,
            storeId: this.storeId,
            subscribeNode: this.subscribeNode
          });
        }
      } catch (e) {
        console.warn('setSubscribeNode->', e);
      }
      this.loading = false;
      if (type === 'switchTab') {
        uni.switchTab({
          url: '/pages/index/index'
        });
      } else {
        uni.navigateBack({
          delta: 1
        });
      }
    },
    // 页面跳转
    handleNavigateTo(url) {
      uni.navigateTo({
        url
      });
    },
    // 关闭
    handleClose() {
      this.$emit('onClose');
    }
  }
};
</script>

<style lang="scss">
.x-navigation-bar{
  ._title{
    height: 88px; display: flex; align-items: center; justify-content: center; position: relative;
    ._name{ font-size: 32px; margin: 0 auto; width: 50%; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
    ._slot{ flex: 1;}
    ._tools{
      position: absolute; left: 0; top: 50%; transform: translate3d(0, -50%, 0); display: flex; align-items: center;
      ._line{ display: none;}
      .back-icon{
        background: rgba(255,255,255,.8);
        border-radius: 200px;
        padding: 8px;
      }
      ._icon{ width: 88px; height: 88px; display: flex; justify-content: center; align-items: center; text-align: center;}
    }
    ._search{ display: flex; align-items: center;}
  }

  &.is-center{
    ._title ._name{ text-align: center;}
  }

  &.is-left{
    ._title ._name{ width: 100%; text-align: left; padding-left: 85px;}
  }

  &.is-desc{
    ._title{
      ._name{ display: block; line-height: 1.2;}
      ._dt{ font-size: 34px; font-weight: bold;}
      ._dd{ font-size: 24px;}
    }
  }

  &.is-fixed {
    position: relative; z-index: 1000;
    ._content { position: fixed; width: 100%; top: 0; left: 0;}
  }
  &.is-hide{
    display: none;
  }
  &.is-capsule{
    ._tools{
      background: rgba(255,255,255,0.6); border-radius: 200px; border: 2px solid rgba(151, 151, 151, 0.201002); left: 20px;
      ._line{ width: 2px; height: 30px; background: rgba(0, 0, 0, 0.198907); display: block;}
      ._icon{ width: 80px; height: 60px;}
    }
    ._menu{ left: auto; right: 20px;}
  }
  &.is-capsule-right{
    ._menu{
      background: rgba(255,255,255,0.6); border-radius: 200px; border: 2px solid rgba(151, 151, 151, 0.201002);left: auto; right: 20px;
      ._line{ width: 2px; height: 30px; background: rgba(0, 0, 0, 0.198907); display: block;}
      ._icon{ width: 80px; height: 60px;}
    }
  }

  &.is-search,
  &.is-category{
    ._title{
      display: flex; align-items: center;
      ._tools{
        left: 20px;
        ._icon{
          width: auto; height: 60px; padding: 0 25px; border: 2px solid rgba(151, 151, 151, 0.201002); border-radius: 40px;
          ._text{ font-size: 28px; padding-left: 8px; color: #323233;}
        }
      }
      ._search{
        flex: 1; background: #EBEDF0; border-radius: 30px; height: 60px; display: flex; align-items: center; padding-left: 20px; margin-left: 20px;
        ._text{ font-size: 28px; color: #646464; }
      }
    }
  }
  &.is-search.is-category{
    ._title {
      padding-left: 20px;
      ._tools{ position: relative; top: auto; left: auto; transform: translate3d(0, 0, 0);}
      ._search{ margin-left: 16px;}
    }
  }
}
</style>
